<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="header-content">
        <div class="logo">
          <h1>📄 文档转换器</h1>
          <span class="subtitle">Word • Markdown • PDF 相互转换</span>
        </div>
        <nav class="main-nav">
          <ul class="nav-list">
            <li repeat.for="item of navigationItems" class="nav-item">
              <a href="#"
                 class="nav-link"
                 class.bind="currentRoute === item.id ? 'nav-link active' : 'nav-link'"
                 click.trigger="setActiveRoute(item.id, $event)">
                <span class="nav-icon">${item.icon}</span>
                <span class="nav-text">${item.title}</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="app-main">
      <div class="main-content">
        <au-viewport></au-viewport>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer class="app-footer">
      <div class="footer-content">
        <p>&copy; 2024 文档转换器 - 支持 Word、Markdown、PDF 格式互转</p>
        <div class="footer-links">
          <a href="#" class="footer-link">使用说明</a>
          <a href="#" class="footer-link">技术支持</a>
          <a href="#" class="footer-link">关于我们</a>
        </div>
      </div>
    </footer>
  </div>
</template>
